<%@ page import="com.sun.org.apache.xpath.internal.operations.Gt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>电子商城</title>
		<link href="styles/style.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
	</head>

	<body>
	<%
		int flag = 0;
		if(request.getSession().getAttribute("flag") != null)
			flag = (int)request.getSession().getAttribute("flag");
		if (flag == 1)
			out.print("<script>alert('登录成功')</script>");
		else if (flag == 39)
			out.print("<script>alert('商品添加到购车失败!')</script>");
		request.getSession().setAttribute("flag", 0);
	%>
		<header>

			<div class="nav-bg">
				<div class="container">

					<ul class="nav-top">

						<li><a href="gouwuche.jsp"><i class="iconfont" >&#xe623;</i>购物车0件</a></li>

						<li id="gundong" >您  的 满 意 是 我 们 最 大 的 幸 福， 祝 你 购 物 愉 快!</li>


						<li style="float: left;">有 问 题 请 您 及 时 拨 打 24 小 时 服 务 热 线 4 0 0 8 0 0 6 0 0</li>
					</ul>
					<b>
						<a >
							会员等级
							<%--<c:if test="${user.level eq 0}"><img src="images/jinpaihuiyuan.png"/></c:if>--%>
							<c:if test="${user.level eq 1}"><img src="images/tongpai.png"/></c:if>
							<c:if test="${user.level eq 2}"><img src="images/yinpaihuiyuan.png"/></c:if>
							<c:if test="${user.level eq 3}"><img src="images/jinpaihuiyuan.png"/></c:if>
						</a>
					</b>
				</div>
			</div>
			<div class="container">

				<marquee width="500px" style="float: left;">
					<p style="font-size:30px;color:orange; margin-top: 22px;">欢迎您!${user.name}</p>
				</marquee>

			</div>

		</header>

		<div class="nav">
			<div class="container">
				<a href="<c:url value="/GoodsShow"/>" >首页</a> |
				<a href="<c:url value="/UserUpdate"/>">会员资料修改</a> |
				<a href="<c:url value="/GouWuCheList"/>">购物车</a> |
				<a href="<c:url value="/OrderList"/>">查看订单</a> |
				<a href="manage1.jsp">后台管理</a> |
				<a href="denglu.jsp">会员登录</a>


			</div>
		</div>
<!--轮播-->
		<div class="banner">
			<div id="gal-wrap">
				<ul id="gallery">
					<li>
						<a><img src="images/lunbo.jpg" /></a>
					</li>
					<li>
						<a><img src="images/lunbo.jpg" /></a>
					</li>
					<li>
						<a><img src="images/lunbo.jpg" /></a>
					</li>
				</ul>
			</div>
			<div class="fenlei">
				<ul class="ul-nav">
					<c:forEach items="${GoodsTypeList}" var="Gt">
						<li><a href="#type_${Gt.id}">${Gt.name}</a></li>
					</c:forEach>
				</ul>
				<%--<ul class="xianshi">
					<b>限时折扣</b>
					<li><img src="images/goods/goods5.jpg" width="100px" height="100px" />
					<span>杯子</span>
					<span>单价：50.0</span>
					<span><br/><img src="images/08.gif" alt="详细信息" onclick="window.location.href='xianxi.jsp'" style="border:0; cursor:hand;"/>&nbsp;
      		              <img src="images/33.gif" alt="订购" onclick="window.location.href='dinggou.html'" style="border:0; cursor:hand;"/></span>
					</li>

					<li><img src="images/goods/goods5.jpg" width="100px" height="100px" />
					<span>杯子</span>
					<span>单价：50.0</span>
					<span><br/><img src="images/08.gif" alt="详细信息" onclick="window.location.href='xianxi.jsp'" style="border:0; cursor:hand;"/>&nbsp;
      		<img src="images/33.gif" alt="订购" onclick="window.location.href='dinggou.html'" style="border:0; cursor:hand;"/></span></li>


				</ul>--%>



			</div>


		</div>
		<c:forEach items="${GoodsTypeList}" var="Gt">
			<div id="content">
			<h3 id="type_${Gt.id}">${Gt.name}
				<span id="spanFirst${Gt.id}">第一页</span>
				<span id="spanPre${Gt.id}">上一页</span>
				<span id="spanNext${Gt.id}">下一页</span>
				<span id="spanLast${Gt.id}">最后一页</span>
				第<span id="spanPageNum${Gt.id}"></span>页/共
				<span id="spanTotalPage${Gt.id}"></span>页</h3>
			<ul class="ul_list" id="list${Gt.id}">
				<c:forEach items="${GoodsList}" var="Gl">
					<c:if test="${Gl.type eq Gt.id}">
					<li>
						<img src="images/goods/goods${Gl.id}.jpg" width="100px" height="100px" />
						<span>${Gl.name}</span>
						<span>单价：${Gl.price}</span>
						<span><br/><img src="images/08.gif" alt="详细信息" onclick="window.location.href='xianxi.jsp?goodsId=${Gl.id}'" style="border:0; cursor:hand;"/>&nbsp;
      		<img src="images/33.gif" alt="订购" onclick="window.location.href='/DingGou?goodsId=${Gl.id}'" style="border:0; cursor:hand;"/></span>
					</li>
					</c:if>
				</c:forEach>
			</ul>
				<script type="application/javascript">
					var theTable${Gt.id} = document.getElementById("list${Gt.id}");
					var li${Gt.id} = theTable${Gt.id}.getElementsByTagName("li");
					var totalPage${Gt.id} = document.getElementById("spanTotalPage${Gt.id}");
					var pageNum${Gt.id} = document.getElementById("spanPageNum${Gt.id}");
					var spanPre${Gt.id} = document.getElementById("spanPre${Gt.id}");
					var spanNext${Gt.id} = document.getElementById("spanNext${Gt.id}");
					var spanFirst${Gt.id} = document.getElementById("spanFirst${Gt.id}");
					var spanLast${Gt.id} = document.getElementById("spanLast${Gt.id}");
					var numberRowsInTable${Gt.id} = li${Gt.id}.length;
					//alert(numberRowsInTable${Gt.id});
					var pageSize${Gt.id} = 8;
					var page${Gt.id} = 1;

					//下一页
					function n${Gt.id}ext() {

						h${Gt.id}ideTable();

						currentRow = pageSize${Gt.id} * page${Gt.id};
						maxRow = currentRow + pageSize${Gt.id};
						if (maxRow > numberRowsInTable${Gt.id}) maxRow = numberRowsInTable${Gt.id};
						for (var i = currentRow; i < maxRow; i++) {
							li${Gt.id}[i].style.display = "";
						}
						page${Gt.id}++;

						if (maxRow === numberRowsInTable${Gt.id}) { n${Gt.id}extText(); l${Gt.id}astText(); }
						s${Gt.id}howPage();
						p${Gt.id}reLink();
						f${Gt.id}irstLink();
					}

					//上一页
					function p${Gt.id}re() {

						h${Gt.id}ideTable();
						page${Gt.id}--;

						currentRow = pageSize${Gt.id} * page${Gt.id};
						maxRow = currentRow - pageSize${Gt.id};

						if (currentRow > numberRowsInTable${Gt.id}) currentRow = numberRowsInTable${Gt.id};

						for (var i = maxRow; i < currentRow; i++) {
							li${Gt.id}[i].style.display = '';
						}

						if (maxRow === 0) {
							p${Gt.id}reText(); f${Gt.id}irstText();
						}
						s${Gt.id}howPage();
						n${Gt.id}extLink();
						l${Gt.id}astLink();
					}

					//第一页
					function f${Gt.id}irst() {
						h${Gt.id}ideTable();
						page${Gt.id} = 1;
						for (var i = 0; i < pageSize${Gt.id}; i++) {
							li${Gt.id}[i].style.display = '';
						}
						s${Gt.id}howPage();
						p${Gt.id}reText();
						if (page${Gt.id} === p${Gt.id}ageCount()) n${Gt.id}extText();
						else n${Gt.id}extLink();
						l${Gt.id}astLink();
					}

					//最后一页
					function l${Gt.id}ast() {
						h${Gt.id}ideTable();
						page${Gt.id} = p${Gt.id}ageCount();
						currentRow = pageSize${Gt.id} * (page${Gt.id} - 1);
						for (var i = currentRow; i < numberRowsInTable${Gt.id}; i++) {
							li${Gt.id}[i].style.display = '';
						}
						s${Gt.id}howPage();
						n${Gt.id}extText();
						if (p${Gt.id}ageCount() === 1) p${Gt.id}reText();
						else p${Gt.id}reLink();
						f${Gt.id}irstLink();
					}

					function h${Gt.id}ideTable() {
						for (var i = 0; i < numberRowsInTable${Gt.id}; i++) {
							li${Gt.id}[i].style.display = 'none';
						}
					}

					function s${Gt.id}howPage() {
						pageNum${Gt.id}.innerHTML = page${Gt.id};
					}

					//总共页数
					function p${Gt.id}ageCount() {
						var count = 0;
						if (numberRowsInTable${Gt.id} % pageSize${Gt.id} !== 0) count = 1;
						return parseInt(numberRowsInTable${Gt.id} / pageSize${Gt.id}) + count;
					}

					//显示链接
					function p${Gt.id}reLink() { spanPre${Gt.id}.innerHTML = "<a href='javascript:p${Gt.id}re();'>上一页</a>"; }
					function p${Gt.id}reText() { spanPre${Gt.id}.innerHTML = "上一页"; }

					function n${Gt.id}extLink() { spanNext${Gt.id}.innerHTML = "<a href='javascript:n${Gt.id}ext();'>下一页</a>"; }
					function n${Gt.id}extText() { spanNext${Gt.id}.innerHTML = "下一页"; }

					function f${Gt.id}irstLink() { spanFirst${Gt.id}.innerHTML = "<a href='javascript:f${Gt.id}irst();'>第一页</a>"; }
					function f${Gt.id}irstText() { spanFirst${Gt.id}.innerHTML = "第一页"; }

					function l${Gt.id}astLink() { spanLast${Gt.id}.innerHTML = "<a href='javascript:l${Gt.id}ast();'>最后一页</a>"; }
					function l${Gt.id}astText() { spanLast${Gt.id}.innerHTML = "最后一页"; }

					//隐藏表格
					function h${Gt.id}ide(){
						for (var i = pageSize${Gt.id}; i < numberRowsInTable${Gt.id}; i++) {
							li${Gt.id}[i].style.display = 'none';
						}
						totalPage${Gt.id}.innerHTML = p${Gt.id}ageCount();
						pageNum${Gt.id}.innerHTML = '1';
						if (p${Gt.id}ageCount() !== 1) n${Gt.id}extLink();
						f${Gt.id}irstLink();
						l${Gt.id}astLink();
					}
					h${Gt.id}ide();
				</script>
		</div>
		</c:forEach>
	</body>
    <script type="text/javascript">

				setInterval(changer, 3000)
			var index = 0;

			function changer() {
				var gallery = document.getElementById("gallery");
				var li = gallery.getElementsByTagName("li");
				var start = index;

				index -= 1000;
				var total = 1000 * li.length;
//				var a =  3 >2 ? "true" :"false"
				index = index ==  -total ? 0 : index;

				var end = index;

				//gallery.style.left = end + "px";

				var timeIndex = setInterval(slider,10)
//0,-500,-1000,
				function slider() {
					if (end == 0) {
						start += 40;
						if (start <= end) {
							gallery.style.left = start + "px";
						} else {
							clearInterval(timeIndex);
						}
					} else {
						start -= 20;
						if (start >= end) {
							gallery.style.left = start + "px";
						} else {
							clearInterval(timeIndex);
						}
					}
				}

			}

		function gundong(){
		   var div=document.getElementById("gundong")
	       var txt=div.innerHTML;

	        var arr=txt.split("");//把字符串变成数组

	      console.log(arr)

	       var first=arr.shift(); //删除数组里
	       console.log(first)

	       arr.push(first);
	      console.log(arr)
	          txt=arr.join("")

          div.innerHTML=txt
             console.log(txt);
		}

	setInterval(gundong,500)

    </script>
</html>